<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>图片库</title>
    <style>
      body {
        font-family: "Helvetica", "Arial", "serif";
        color: #333;
        background-color: #ccc;
        margin: 1rem 10%;
      }

      h1 {
        color: #333;
        background-color: transparent;
      }

      a {
        color: #c60;
        background-color: transparent;
        font-weight: bold;
        text-decoration: none;
      }

      ul {
        padding: 0;
      }
      li {
        list-style: none;
        float: left;
        padding: 1rem;
      }

      img {
        display: block;
        clear: both;
      }
    </style>
  </head>
  <body>
    <h1>Photos</h1>
    <ul id="imageGallery">
      <li>
        <a href="../static/images/1.jpg" title="picture1">图片1</a>
      </li>
      <li>
        <a href="../static/images/2.jpg" title="picture2">图片2</a>
      </li>
      <li>
        <a href="../static/images/3.jpg" title="picture3">图片3</a>
      </li>
      <li>
        <a href="../static/images/4.jpg" title="picture4">图片4</a>
      </li>
    </ul>

    <p id="imageRemark">说明：这是图片库，请查看图片信息</p>

    <script>
      window.onload = function () {
        var imageGallery = document.getElementById("imageGallery");
        var imageRemark = document.getElementById("imageRemark");
        //动态创建img、p
        var imgNode = document.createElement("img");
        //设置属性
        imgNode.setAttribute("id", "image");
        imgNode.setAttribute("src", "../static/images/5.jpg");
        imgNode.setAttribute("alt", "this is a image");

        var pNode = document.createElement("p");
        pNode.setAttribute("id", "picture_title");
        pNode.setAttribute("title", "default picture");
        var pTextNode = document.createTextNode("default picture");

        document.body.appendChild(imgNode);
        pNode.appendChild(pTextNode);
        document.body.appendChild(pNode);

        //在某元素之前插入
        // document.body.insertBefore(pNode,imageRemark)
        // document.body.insertBefore(imgNode,pNode)

        //在某元素之后插入
        insertAfter(imgNode, imageGallery);
        insertAfter(pNode, imgNode);

        var aList = document.getElementsByTagName("a");
        for (var i = 0; i < aList.length; i++) {
          aList[i].onclick = function () {
            showPic(this);
            return false;
          };
        }
      };

      //显示图片
      function showPic(watchPic) {
        //将图片的属性href添加到image中
        var image = document.getElementById("image");

        // var source = watchPic.getAttribute('href');
        var source = watchPic.href;

        // image.setAttribute('src', source)
        image.src = source;

        //设置图片的标题
        var imageTitle = document.getElementById("picture_title");

        // var title = watchPic.getAttribute('title');
        var title = watchPic.title;

        imageTitle.firstChild.nodeValue = title;
        console.log(imageTitle.firstChild.nodeValue);
      }

      //封装insertAfter()函数
      function insertAfter(newElement, targetElement) {
        var parent = targetElement.parentNode;
        if (parent.lastChild == targetElement) {
          parent.appendChild(newElement);
        } else {
          parent.insertBefore(newElement, targetElement.nextSibling);
        }
      }
    </script>
  </body>
</html>
